<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-tabs v-model="activeName" class="tab" @tab-click="handleClick">
        <el-tab-pane label="销售额" name="first" />
        <el-tab-pane label="访问量" name="second" />
      </el-tabs>
      <div class="right">
        <span @click="day">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMoth">本月</span>
        <span @click="setYear">本年</span>
        <!--           v-model="value1"-->
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
    <el-row :gutter="10" style="margin-top: 20px">
      <el-col :span="18">
        <saleMychart v-if="isShow===0" />
        <myCharts v-if="isShow===1" />
      </el-col>
      <el-col :span="6">
        <RadarChart />
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import myCharts from '@/views/dashboard/content/myCharts/myCharts'
import saleMychart from '@/views/dashboard/content/saleMychart/saleMychart'
import RadarChart from '@/views/dashboard/content/myCharts/RightText/index'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
export default {
  name: 'Content',
  components: {
    myCharts,
    RadarChart,
    saleMychart
  },
  data() {
    return {
      activeName: 'first',
      myChart: null,
      value1: [],
      isShow: 0
    }
  },
  computed: {
    title() {
      if (this.activeName === 'first') {
        return '销售额'
      } else {
        return '访问量'
      }
    }
    // ...mapState({
    //   saleInfo: state => state.home.echartsinfo
    // })

  },
  mounted() {
    this.$store.dispatch('getEcahrts')
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.label)
      if (tab.label === '访问量') {
        this.isShow = 1
      } else {
        this.isShow = 0
      }
    },
    day() {
      console.log(123)
      const day = dayjs().format('YYYY-MM-DD')
      this.value1 = [day, day]
    },
    setWeek() {
      const startWeek = dayjs().day(1).format('YYYY-MM-DD')
      const endWeek = dayjs().day(7).format('YYYY-MM-DD')
      this.value1 = [startWeek, endWeek]
    },
    setMoth() {
      const startMoth = dayjs().month(0).format('YYYY-MM-DD')
      const endMoth = dayjs().month(1).format('YYYY-MM-DD')
      this.value1 = [startMoth, endMoth]
    },
    setYear() {
      const startYear = dayjs().startOf('year').format('YYYY-MM-DD')
      const endYear = dayjs().endOf('year').format('YYYY-MM-DD')
      this.value1 = [startYear, endYear]
    }
  }

}
</script>

<style  scoped>
.box-card{
  margin-top: 20px;
}
.clearfix{
  display: flex;
  justify-content: space-between;
  width: 100%;
  position:relative;
}
.tab{
  width: 100%;
}
.right{
  position: absolute;
  right: 0;
}
.right span{
  margin:0 10px;
}
.bar{
  width: 100%;
  height: 300px;
}
</style>
